<template>
  <div class="container">
    <nav class="nav">
    <div class="nav-left">
      <a class="nav-item is-brand mark">
        <img src="../assets/glass.jpg"  alt="InfM: Professional management software">
      </a>
    </div>

    <div class="nav-center">
      <router-link class="nav-item is-primary" :class=hoverAnimate :to="{name: 'Register'}" v-show="!isLogin">
        注册
      </router-link>
      <router-link class="nav-item is-primary" :class=hoverAnimate :to="{name: 'Login'}" v-show="!isLogin">
        登录
      </router-link>
      <a class="nav-item mark" href="javascript:void(0)" v-show="isLogin">{{mobile}}</a>
      <router-link class="nav-item is-primary" :class=hoverAnimate :to="{name: 'Subregister'}" v-show="isAdmin">
        添加操作员
      </router-link>
      <a class="nav-item" href="javascript:void(0)" v-show="isLogin" @click="logoutClick">退出</a>
    </div>

    <span id="nav-toggle" class="nav-toggle" :class="{'is-active': isActive}" @click="toggleClick">
      <span></span>
      <span></span>
      <span></span>
    </span>

    <div id="nav-menu" class="nav-right nav-menu" :class="{'is-active': isActive}">
      <router-link class="nav-item" :class=hoverAnimate :to="{name: 'Home'}">
        首页
      </router-link>
      <router-link class="nav-item" :class=hoverAnimate :to="{name: 'Intro'}">
        客户资料
      </router-link>
      <router-link class="nav-item" :class=hoverAnimate :to="{name: 'Hello'}">
        库存
      </router-link>
      <div class="nav-item">
        <div class="field is-grouped">
          <p class="control">
            <a id="upload" class="button" target="_blank" href="javascript:void(0)">
              <span class="icon">
                <i class="fa fa-upload" aria-hidden="true"></i>
              </span>
              <file-upload action="/api/upload/excel" :accept="uploadType" :show-file-list="showList" :on-success="uploadSuccess" :on-error="uploadError">上传资料</file-upload>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary" href="/static/template.xlsx">
              <span class="icon">
                <i class="fa fa-download"></i>
              </span>
              <span>下载模版</span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary" ref="exportExcel" href="javascript:void(0)" @click="exportExcel">
              <span class="icon">
                <i class="fa fa-download"></i>
              </span>
              <span>导出资料</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </nav>

</div>
</template>
<script>
import { Upload, Message } from 'element-ui';
import { mapState } from 'vuex'
import CookieUtil from '../utils/cookieTool';

export default {
  data() {
    return {
      isActive: false,
      hoverAnimate: '',
      showList: false,
      uploadType: 'xlsx',
    };
  },
  methods: {
    toggleClick() {
      this.isActive = !this.isActive;
    },
    uploadSuccess(response, file, fileList) {
      this.isActive = false;
      if (response.rtnCode === '000') {
        Message({
          message: response.rtnMsg,
          type: 'success',
          duration: 2000,
        });
      } else if (response.rtnCode === '302') {
        Message({
          message: response.rtnMsg,
          type: 'error',
          duration: 2000,
        });
      } else {
        Message({
          message: response.rtnMsg,
          type: 'success',
          duration: 2000,
        });
      }
    },
    uploadError(err, file, fileList) {
      this.isActive = false;
      Message({
        message: '上传失败，请检查网络',
        type: 'error',
        duration: 2000,
      });
    },
    exportExcel() {
      this.isActive = false;
      window.location = this.$url.EXPORTEXCEL;
    },
    logoutClick() {
      CookieUtil.clean();
      window.location = '/'
    },
  },
  watch: {
    $route() {
      this.isActive = false;
    },
  },
  components: {
    'file-upload': Upload,
  },
  computed: mapState([
    'isLogin',
    'mobile',
    'isAdmin',
  ]),
};

</script>

<style lang="scss">
@import "~hover.css/css/hover-min.css";
  .container {
    .nav-right {
      .control {
      }
    }
    .mark {
      cursor: default;
    }
  }
</style>
